<template>
    <div class="logisticsCompanyDetail">
        <div class="top">
            <div class="top_l">
                <div class="company">
                    <img src="~@/assets/images/联系人@3x.png" class="logo" />
                </div>
                <div class="userinfo">
                    <div>{{ detailParams.companyName }}</div>
                    <div>
                        {{ detailParams.logisticsCompanyNumber }}
                    </div>
                </div>
            </div>

            <div class="top_r">
                <el-button type="primary" @click="auditWay" v-if="detailParams.auditStatus == 0">审核</el-button>
                <el-button type="primary" @click="setVehicle">车辆</el-button>

                <el-button type="primary" @click="update">编辑</el-button>
                <el-button @click="edit">删除</el-button>

            </div>
        </div>

        <div class="bottom">
            <el-tabs v-model="activeName" @tab-click="tabHandleClick">
                <el-tab-pane label="公司信息" name="0">
                    <div style="padding:30px">
                        <p style="font-size:20px">基本信息</p>
                        <el-row>
                            <el-col :span="6" class="mb20">公司名称：
                                <span>{{ detailParams.companyName }}</span>
                            </el-col>
                            <el-col :span="6" class="mb20">物流公司编号： <span>{{ detailParams.logisticsCompanyNumber
                            }}</span></el-col>
                            <el-col :span="6" class="mb20">统一社会信用代码：
                                <span>{{ detailParams.unifiedSocialCreditCode }}</span>
                            </el-col>
                            <el-col :span="6" class="mb20">法人： <span>{{ detailParams.legalPerson }}</span></el-col>
                            <el-col :span="6" class="mb20">所在区域： <span>{{ detailParams.area }}</span></el-col>
                            <el-col :span="6" class="mb20">详细地址： <span>{{ detailParams.detailedAddress }}</span></el-col>
                            <el-col :span="6" class="mb20">关联用户账号： <span>{{ detailParams.associatedUserAccount
                            }}</span></el-col>
                            <el-col :span="6" class="mb20">是否启用：
                                <el-tag v-if="detailParams.isEnabled == 1" type="success">启用</el-tag>
                                <el-tag v-else type="danger">禁用</el-tag>

                            </el-col>
                            <el-col :span="6" class="mb20">审核状态：
                                <el-tag v-if="detailParams.auditStatus == 1" type="success">已审核</el-tag>
                                <el-tag v-else-if="detailParams.auditStatus == 0" type="warning">待审核</el-tag>

                                <el-tag v-else type="danger">已驳回</el-tag>
                            </el-col>
                        </el-row>
                        <p style="font-size:20px">资质材料</p>
                        <el-row>
                            <el-col :span="8" class="mb20">
                                <el-row type="flex" class="row-bg" justify="start">

                                    <el-col :span="6">
                                        <div>
                                            <div class="tac">
                                                <div class="mb20">营业执照</div>
                                                <!--图片显示组件 -->
                                                <ImagePreview :width=100 :height=100 :src="imgurl"
                                                    :preview-src-list="[imgurl]" />
                                            </div>
                                        </div>

                                    </el-col>

                                </el-row>
                            </el-col>



                        </el-row>
                        <p style="font-size:20px">审核信息</p>
                        <!-- 审核信息 -->
                        <LPTablePage :showPage="false" :showIndex="false" :table-data="auditTableData"
                            :table-column="auditTableColumn" align="left" :randomColumnKey="true" ref="auditTablePage"
                            :maxHeight="'300px'"
                            >
                            <template slot="auditResult" slot-scope="scope">
                                <!-- auditResult -->
                                <span v-if="scope.row.auditResult==1">
                                通过
                                </span>
                                <span v-if="scope.row.auditResult==2">
                                驳回
                                </span>
                            </template>
                        </LPTablePage>
                        <p style="font-size:20px">系统信息</p>
                        <el-row>
                            <el-col :span="6" class="mb20">操作时间：350181111122223333</el-col>
                            <el-col :span="6" class="mb20">操作人：350181111122223333</el-col>
                            <el-col :span="6" class="mb20">创建人：350181111122223333</el-col>
                            <el-col :span="6" class="mb20">创建时间：350181111122223333</el-col>
                            <el-col :span="6" class="mb20">创建来源：350181111122223333</el-col>

                        </el-row>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="关联车辆" name="1">
                    <div style="
                    background-color: #fff;
        padding: 0 .3rem;
                    ">
                        <!-- relevanceVehicle 关联车辆 -->
                        <search-bar v-model="relevanceVehicleSearchModel" :search-data="relevanceVehicleSearchData"
                            :config="relevanceVehicleSearchData" @search="handleSearchRelevanceVehicleSubmit"
                            @searchReset="handleRelevanceVehicleSearchReset">
                        </search-bar>
                    </div>
                    <div class="record">
                        <LPTablePage :showIndex="false" :table-data="relevanceVehicleData"
                            :table-column="relevanceVehicleTableColumn" align="left" :total="relevanceVehicleTotal"
                            :current-page="relevanceVehicleCurrentPage" @handleSizeChange="relevanceVehicleHandleSizeChange"
                            @handleCurrentChange="relevanceVehicleHandleCurrentChange" :randomColumnKey="true"
                            ref="relevanceVehicleTablePage">

                            <template slot="relate" slot-scope="scope">

                                <span v-if="scope.row.relate == 1">
                                    临时
                                </span>
                                <span v-else>
                                    自有
                                </span>
                            </template>
                            <template slot="isActive" slot-scope="scope">

                                <span v-if="scope.row.isActive == 1">
                                    启用
                                </span>
                                <span v-else>
                                    禁用
                                </span>
                            </template>

                        </LPTablePage>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="操作日志" name="2">
                    <div style="
                    background-color: #fff;
        padding: 0 .3rem;
                    ">
                        <search-bar v-model="searchModel" :search-data="searchData" :config="searchData"
                            @search="handleSearchSubmit" @searchReset="handleSearchReset">
                        </search-bar>
                    </div>
                    <div class="record">
                        <LPTablePage :showIndex="false" :table-data="tableData" :table-column="tableColumn" align="left"
                            :total="total" :current-page="currentPage" @handleSizeChange="handleSizeChange"
                            @handleCurrentChange="handleCurrentChange" :randomColumnKey="true" ref="tablePage">
                        </LPTablePage>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 车辆 -->
        <base-dialog :visible="vehicleVisile" title="关联车辆" width="1200px" class="addDictDialog"
            @handleDialogSubmit="handleTransferSubmit" @handleDialogCancle="handleTransferCancle">
            <TransferTable :id="$route.params.id" @submit="transferTableSubmit" :key="time1"/>
        </base-dialog>

        <!-- 审核 -->
        <base-dialog :visible="auditVisile" title="审核" width="640px" class="addDictDialog"
            @handleDialogSubmit="handleAuditSubmit" @handleDialogCancle="handleAuditCancle">
            <el-form ref="auditParams" :model="auditParams" :rules="dictRule" label-width="120px" class="dictForm"
                label-position="top" size="medium">
                <el-row :gutter="50">

                    <el-col :span="24">
                        <el-form-item label="审核结果:" prop="auditStatus">
                            <el-radio-group v-model="auditParams.auditStatus">
                                <el-radio :label="1">通过</el-radio>
                                <el-radio :label="2">驳回</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="审核说明:" prop="auditText">
                            <el-input v-model.trim="auditParams.auditText" type="textarea" :rows="2" placeholder="请输入">
                            </el-input>
                        </el-form-item>
                    </el-col>




                </el-row>


            </el-form>
        </base-dialog>
        <!-- 编辑or新增 -->
        <base-dialog :visible="addVisile" title="编辑物流公司" width="918px" class="addDictDialog"
            @handleDialogSubmit="handleAddSubmit" @handleDialogCancle="handleAddCancle">
            <el-form ref="dictForm" :model="dictModel" :rules="dictRule" label-width="120px" class="dictForm"
                label-position="top" size="medium">
                <el-row :gutter="50">

                    <el-col :span="12">
                        <el-form-item label="物流公司名称:" prop="companyName">
                            <!-- <el-input v-model.trim="dictModel.companyName" placeholder="请输入">
        </el-input> -->
                            <el-autocomplete style="width:100%" v-model="dictModel.companyName"
                                :fetch-suggestions="querySearchAsync" placeholder="请输入"
                                @select="handleSelect"></el-autocomplete>

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="物流公司编号:" prop="">
                            <el-input v-model.trim="dictModel.logisticsCompanyNumber" placeholder="请输入">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="统一社会信用代码:" prop="unifiedSocialCreditCode">
                            <el-input v-model="dictModel.unifiedSocialCreditCode" placeholder="请输入" disabled>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="法人:" prop="legalPerson">
                            <el-input v-model="dictModel.legalPerson" placeholder="请输入" disabled>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所在区域:" prop="area">
                            <el-input v-model="dictModel.area" placeholder="请输入" disabled>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="详细地址:" prop="detailedAddress">
                            <el-input v-model="dictModel.detailedAddress" placeholder="请输入" disabled>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="关联用户帐号:">
                            <el-select style="width:100%" v-model="dictModel.associatedUserAccount" placeholder="关联用户帐号"
                                filterable>
                                <el-option v-for="(item, index) in systemOptions" :key="index" :value="item.value"
                                    :label="item.label" />
                            </el-select>
                            <!-- <el-input  v-model="dictModel.system" readonly></el-input> -->

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否启用:" prop="isEnabled">
                            <el-switch v-model="dictModel.isEnabled" />
                            <span class="ml20">关闭后物流公司在系统停止使用</span>

                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </base-dialog>
    </div>
</template>

<script>
import LPTablePage from '@/components/LPTablePage'
import SearchBar from '@/components/SearchBar'
import baseDialog from '@/components/BaseDialog'
import ImagePreview from '@/components/ImagePreview';
import TransferTable from './components/TransferTable.vue';
import beiGangApi from '@/api/logistics/beigang';
import { closeActiveTag } from "@/utils/lpUtils.js";
import masterDataApi from '@/api/logistics/masterData'
import {auditInfoQueryListByTransportId} from '@/api/logistics/public'
import data from '@/views/pdf/content';

export default {
    name: 'logisticsCompanyDetail',
    components: {
        LPTablePage, SearchBar, baseDialog,
        ImagePreview, TransferTable
    },
    data() {
        return {
            time1:'',
            vehicleVisile: false,
            addVisile: false,
            auditVisile: false,
            auditParams: {

            },
            selectOptions: {},
            selectRelevanceVehicleList: [],//选中的关联车辆信息列表
            systemOptions: [
                { value: 1, label: '1111' }
            ],
            detailParams: null,
            dictModel: {},
            activeName: '0',
            searchModel: {},
            relevanceVehicleSearchModel: {},
            relevanceVehicleData: [],
            auditTableData: [],
            tableData: [],

            imgurl: 'http://43.138.9.96:9000/ruoyi/2024/09/30/2d0d4f03fcbc47988fd60060532b68c4.png',
            total: 0,
            relevanceVehicleTotal: 0,

            currentPage: 1,
            pageSize: 10,
            relevanceVehiclePageSize: 10,
            relevanceVehicleCurrentPage: 1,

            relevanceVehicleSearchData: [
                {
                    prop: 'vehicleStatus',
                    type: 'select',
                    placeholder: '车辆状态',
                    options: [
                        { label: '停用', value: '0' },
                        { label: '可用', value: '1' },

                    ]
                },
                {
                    placeholder: "车牌号", prop: "vehicleNumber",



                },
                {
                    prop: 'isActive',
                    type: 'select',
                    placeholder: '是否启用',
                    options: [
                        { label: '禁用', value: 0 },
                        { label: '启用', value: 1 },

                    ]

                },


                {
                    prop: 'search',
                    type: 'button',
                    // policy: ['system.log.query'],
                },
            ],
            searchData: [
                { placeholder: "操作", prop: "ipaddr", },
                { placeholder: "操作事件", prop: "userName" },
                { placeholder: "操作人", prop: "aa" },
                {
                    label: "操作时间", prop: "loginTime", type: "daterangehms",
                    startPlaceholder: "起始时间",
                    endPlaceholder: "结束时间",

                },
                {
                    prop: 'search',
                    type: 'button',
                    // policy: ['system.log.query'],
                },
            ],
            auditTableColumn: [
            { label: "审核时间", prop: "auditTime" },

{ label: "审核人", prop: "auditor" },
{ label: "审核结果", prop: "auditResult",render:true },
{ label: "审核说明", prop: "auditDescription" },
            ],
            relevanceVehicleTableColumn: [
                { label: "关联时间", prop: "relateTime", },

                { label: "车牌号", prop: "vehicleNumber" },
                { label: "关系类型", prop: "relate", render: true },
                { label: "排放标准", prop: "emissionStandard",  },
                { label: "是否启用", prop: "isActive", render: true },
                { label: "操作人", prop: "auditedBy", },


            ],
            tableColumn: [

                { label: "操作时间", prop: "infoId", },

                { label: "操作人", prop: "userName" },
                { label: "操作", prop: "ipaddr", },
                { label: "操作事件", prop: "infoId", },

            ],
            dictRule: {
                companyName: [{ required: true, trigger: "blur", message: "必填" }],
                isEnabled: [{ required: true, trigger: "change", message: "必选" }],
                unifiedSocialCreditCode: [{ required: true, trigger: "blur", message: "必填" }],
                legalPerson: [{ required: true, trigger: "blur", message: "必填" }],
                area: [{ required: true, trigger: "blur", message: "必填" }],
                detailedAddress: [{ required: true, trigger: "blur", message: "必填" }],
                auditStatus: [{ required: true, trigger: "change", message: "必选" }],

            },
            timeout: null,// 定时器，用于控制请求频率
        }
    },
    mounted() {
        this.getDetail()
        this.getAuditInfoQueryListByTransportId()
        // 查询关联车辆
        this.getQueryDictDetailByCodeWay('emissionStandard')//排放标准

    },
    methods: {
           // 获取 审核信息
           getAuditInfoQueryListByTransportId(){
            auditInfoQueryListByTransportId({
                moduleType:4,
                moduleId:this.$route.params.id
            }).then(res=>{
                if(res.code==200){
                    this.auditTableData = res.data
                }
            })
        },

        /*企业查询模糊搜索相关 start*/
        // beiGangApi.logisticsCompanyFuzzySearch(query)
        querySearchAsync(queryString, cb) {
            clearTimeout(this.timeout);
            this.timeout = setTimeout(async () => {
                if (queryString) {
                    try {
                        // 调用接口获取数据
                        const results = await this.fetchRemoteData(queryString)
                        // const results1 = results .filter(item => item.includes(queryString))
                        // 将获取的数据传递给回调函数cb
                        cb(results);
                    } catch (error) {
                        console.error('Fetch error:', error);
                        cb([]); // 如果出错，传递一个空数组
                    }
                } else {
                    cb([]); // 如果queryString为空，传递一个空数组
                }
            }, 500); // 设置延时来减少请求频率
        },
        async fetchRemoteData(query) {
            const result = await beiGangApi.logisticsCompanyFuzzySearch({ companyName: query })
            // 模拟接口调用，实际应用中需要替换为真实的API调用
            const res1 = result.filter(item => item.companyName.includes(query));
            return res1.map((itm => {
                return {
                    ...itm,
                    value: itm.companyName
                }
            }))
        },

        handleSelect(item) {
            this.dictModel.unifiedSocialCreditCode = item.unifiedSocialCreditCode

            this.dictModel.legalPerson = item.legalPerson
            this.dictModel.area = item.area
            this, this.dictModel.detailedAddress = item.detailedAddress
        },
        getDetail() {
            beiGangApi.getLogisticsCompanyDetail(this.$route.params.id).then(res => {
                if (res.code == 200) {
                    this.detailParams = {
                        ...res.data,
                        isEnabled: res.data.isEnabled == 1 ? true : false
                    }

                }
            })
        },
        /*审核操作 start*/
        auditWay() {
            this.auditVisile = true
        },
        handleAuditSubmit() {
            this.$refs.auditParams.validate(valid => {
                let arr = [
                    {
                        id: this.detailParams.id,
                        ...this.auditParams
                    }
                ]

                if (valid) {

                    beiGangApi.updateLogisticsCompanyList(arr).then(res => {
                        if (res.code == 200) {

                            this.auditParams = this.$options.data().auditParams

                            this.$message.success("审核成功")
                            this.auditVisile = false;
                            this.getDetail()
                         this.getAuditInfoQueryListByTransportId()
                        }
                    })
                } else {
                    this.$message.warning("审核失败")
                    return false
                }
            })

        },
        handleAuditCancle() {
            this.auditParams = this.$options.data().auditParams
            this.resetForm("auditParams")
            this.auditVisile = false;
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        /*审核操作 end*/

        /*关联车辆 start*/
        optionsFilter(val, name) {
           
           let arr = this.selectOptions[name];
         
           if(arr&&arr.length){
               let index = arr.findIndex((item) => {
               return item.id == val;
           });
           return arr[index].dictValue;
           }else{
               return '暂无'
           }
       },
        getQueryDictDetailByCodeWay(dictCode){
            masterDataApi.getQueryDictDetailByCode(dictCode).then((res) => {
                if (res.code == 200) {
                    let name = `${dictCode}`;
                    this.$set(this.selectOptions, name, res.data.sysDictDataDetailList);
                    // this.$options.data()
                    // this.[name] = res.data.sysDictDataDetailList
                }
            });
        },
        setVehicle() {
            this.vehicleVisile = true
        },
        handleTransferSubmit() {
            if (this.selectRelevanceVehicleList.length) {
                let vehicleInfo = this.selectRelevanceVehicleList.map(item => {
                    return {
                        id: item.id,
                        isActive: item.isActive,
                        relate: item.relate,
                        vehicleStatus: item.vehicleStatus
                    }
                })

                beiGangApi.logisticsCompanyAddRelate(
                    {
                        companyId: this.detailParams.id,
                        vehicleInfo
                    }
                ).then(res => {
                    if (res.code == 200) {
                        this.$message.success('关联车辆成功')
                        this.vehicleVisile = false
                        this.time1 = new Date().getTime()
                        this.selectRelevanceVehicleList = []
                    }
                })
            } else {
                this.$message.warning('请选择关联车辆')
            }
        },
        handleTransferCancle() {
            this.vehicleVisile = false
            this.selectRelevanceVehicleList = []
            this.time1 = new Date().getTime()
        },
        // 获取选中的关联车辆列表
        transferTableSubmit(data) {

            this.selectRelevanceVehicleList = data

        },
        /*关联车辆  end*/



        /*编辑车辆  start*/
        update() {
            this.addVisile = true
            this.dictModel = {
                ...this.detailParams,
                isEnabled: this.detailParams.isEnabled == 1 ? true : false
            }
        },
        handleAddSubmit() {
            this.$refs.dictForm.validate(valid => {
                if (valid) {
                    let obj = {
                        ...this.dictModel,
                        isEnabled: this.dictModel.isEnabled == true ? 1 : 0
                    }

                    beiGangApi.updateLogisticsCompany(obj).then(res => {
                        if (res.code == 200) {

                            this.dictModel = this.$options.data().dictModel
                            this.$message.success("编辑成功")
                            this.addVisile = false;
                            this.getDetail()

                        }
                    })
                } else {

                    return false
                }
            })
        },
        handleAddCancle() {

            this.dictModel = this.$options.data().dictModel
            this.resetForm("dictForm")
            this.addVisile = false;
        },
        /*编辑车辆 end*/

        //   删除车辆
        edit() {
            this.$confirm('确定删除吗', '取消', {
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                closeOnClickModal: false
            }).then(() => {
                // let ids = this.selectArr.map(item => item.id).join(',');

                beiGangApi.delLogisticsCompany(this.detailParams.id).then(res => {
                    if (res.code == 200) {
                        this.$message.success("操作成功")
                        // this.getDetail()
                        closeActiveTag(this, "/logistics/beiGang/logisticsCompany");


                    }
                })
            })
        },
        // 查询关联车辆表格信息

        getRelevanceVehicleTableList() {

            let { pageSize } = this.$refs.relevanceVehicleTablePage;
            let params = {
                companyId: this.detailParams.id,
                ...this.relevanceVehicleSearchModel,
                pageSize: pageSize,
                pageNum: this.relevanceVehicleCurrentPage
            }

            // 
            beiGangApi.logisticsCompanyQueryRelate(params).then(res => {
                if (res.code == 200) {

                    this.relevanceVehicleTotal = res.total;
                    this.relevanceVehicleData = res.rows.map(item=>{
                        return {
                            ...item,
                            emissionStandard: this.optionsFilter(
                                item.emissionStandard,
                            "emissionStandard"
                        ),
                        }
                    })
                    

                }
            })
        },
        // 查询表格信息
        getTableList() {
            let { pageSize } = this.$refs.tablePage;
        },
        tabHandleClick(tab, event) {
            console.log(tab.index, event);
            if (tab.index == 1) {
                this.getRelevanceVehicleTableList()
            }

        },
        relevanceVehicleHandleCurrentChange(v) {
            this.relevanceVehicleCurrentPage = v;
            this.getRelevanceVehicleTableList()
        },
        relevanceVehicleHandleSizeChange(v) {
            this.relevanceVehiclePageSize = v;
            this.relevanceVehicleCurrentPage = 1;
            this.getRelevanceVehicleTableList()
        },
        handleCurrentChange(v) {
            this.currentPage = v;
            this.getTableList()
        },
        handleSizeChange(v) {
            this.pageSize = v;
            this.currentPage = 1;
            this.getTableList()
        },
        // 关联车辆列表查询
        handleSearchRelevanceVehicleSubmit() {
            this.relevanceVehicleCurrentPage = 1;
            this.getRelevanceVehicleTableList()

        },
        handleRelevanceVehicleSearchReset() {
            this.relevanceVehicleCurrentPage = 1;
            this.$refs.relevanceVehicleTablePage.clearSelection()
            this.getRelevanceVehicleTableList()
        },
        handleSearchSubmit() {
            this.currentPage = 1;
            this.getTableList()
        },
        handleSearchReset() {
            this.currentPage = 1;
            this.$refs.tablePage.clearSelection()
            this.getTableList()
        },
    }
}
</script>

<style lang="scss" scoped>
.logisticsCompanyDetail {
    padding: 30px;

    .top {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .top_l {
            display: flex;

            .userinfo {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
        }
    }
}

.company {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #0076ff;
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 0.5rem;
    margin-right: 16px;

    .logo {
        width: 51px;
        height: 51px;
    }
}
</style>